<template>
  <view class="game-container">
    <!-- 标题 -->
    <view class="title">🔮 猜数字游戏</view>

    <!-- 设置范围面板 -->
    <view v-if="!gameStarted" class="setting-panel card">
      <view class="range-display" @click="toggleDrawer">
        当前范围：{{ rangeStart }} ~ {{ rangeEnd }}
        <text class="arrow">{{ isDrawerOpen ? '▼' : '▶' }}</text>
      </view>

      <!-- 抽屉内容 -->
      <view v-if="isDrawerOpen" class="drawer-content">
        <view class="slider-group">
          <text>起始值：{{ rangeStart }}</text>
          <slider
            min="1"
            max="999"
            :value="rangeStart"
            @changing="onStartChanging"
            @change="onStartChange"
            block-size="20"
            activeColor="#07c160"
          />
        </view>

        <view class="slider-group">
          <text>结束值：{{ rangeEnd }}</text>
          <slider
            min="2"
            max="1000"
            :value="rangeEnd"
            @changing="onEndChanging"
            @change="onEndChange"
            block-size="20"
            activeColor="#f44336"
          />
        </view>

        <button class="start-btn ripple" @click="startGame">🎮 开始游戏</button>
      </view>
    </view>

    <!-- 猜测区域 -->
    <view v-else class="guess-area card">
      <view class="input-wrapper">
        <input
          type="number"
          v-model.number="userInput"
          placeholder="请输入猜测的数字"
          class="guess-input"
          :disabled="gameOver || attempts >= maxAttempts"
          @confirm="submitGuess"
        />
        <button
          @click="submitGuess"
          :disabled="gameOver || attempts >= maxAttempts"
          class="submit-btn ripple"
        >
          猜一猜
        </button>
      </view>

      <!-- 提示信息 -->
      <view class="feedback-box">
        <image
          v-if="feedbackIcon"
          :src="feedbackIcon"
          mode="aspectFit"
          class="icon bounce"
        />
        <text class="feedback-text">{{ feedback }}</text>
      </view>

      <!-- 尝试次数 -->
      <view class="attempts">已尝试 {{ attempts }} / {{ maxAttempts }} 次</view>

      <!-- 进度条 -->
      <view class="progress-bar">
        <view
          class="progress-fill"
          :style="{ width: progressWidth + '%' }"
        ></view>
      </view>

      <!-- 重新开始按钮 -->
      <button v-if="gameOver" @click="resetGame" class="restart-btn">🔄 重新开始</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rangeStart: 1,
      rangeEnd: 100,

      secretNumber: 0,
      userInput: null,
      feedback: '请输入你的猜测...',
      feedbackIcon: '',
      attempts: 0,
      maxAttempts: 15,
      gameOver: false,
      gameStarted: false,
      isDrawerOpen: false
    };
  },
  computed: {
    progressWidth() {
      return Math.min((this.attempts / this.maxAttempts) * 100, 100);
    }
  },
  methods: {
    toggleDrawer() {
      this.isDrawerOpen = !this.isDrawerOpen;
    },
    onStartChanging(e) {
      this.rangeStart = e.detail.value;
    },
    onStartChange(e) {
      const val = e.detail.value;
      if (val >= this.rangeEnd) return;
      this.rangeStart = val;
    },
    onEndChanging(e) {
      this.rangeEnd = e.detail.value;
    },
    onEndChange(e) {
      const val = e.detail.value;
      if (val <= this.rangeStart) return;
      this.rangeEnd = val;
    },
    startGame() {
      if (this.rangeStart >= this.rangeEnd) {
        uni.showToast({ title: '起始必须小于结束', icon: 'none' });
        return;
      }

      this.secretNumber = Math.floor(Math.random() * (this.rangeEnd - this.rangeStart + 1)) + this.rangeStart;
      this.gameStarted = true;
    },
    submitGuess() {
      const num = parseInt(this.userInput);

      if (isNaN(num) || num < this.rangeStart || num > this.rangeEnd) {
        uni.showToast({
          title: `请输入${this.rangeStart}~${this.rangeEnd}之间的有效数字`,
          icon: 'none'
        });
        return;
      }

      if (this.attempts >= this.maxAttempts) {
        uni.showToast({ title: '次数已用完，无法继续猜啦～', icon: 'none' });
        return;
      }

      this.attempts++;
      this.userInput = '';

      if (num === this.secretNumber) {
        this.feedback = '恭喜你，猜中啦！🎉';
        this.feedbackIcon = 'https://lover-chengmj.oss-cn-beijing.aliyuncs.com/icon/success.png';
        this.gameOver = true;

        uni.showToast({
          title: '猜中啦！',
          icon: 'success',
          duration: 1500
        });

      } else if (num > this.secretNumber) {
        this.feedback = '猜大了你个笨蛋';
        this.feedbackIcon = 'https://lover-chengmj.oss-cn-beijing.aliyuncs.com/icon/error.png';

        uni.showToast({
          title: '⬆️猜大了你个笨蛋',
          icon: 'none',
          duration: 2000,
        });

      } else {
        this.feedback = '️太小了你个小笨蛋';
        this.feedbackIcon = 'https://lover-chengmj.oss-cn-beijing.aliyuncs.com/icon/error.png';

        uni.showToast({
          title: '⬇️太小了你个小笨蛋',
          icon: 'none',
          duration: 2000,
        });
      }
    },
    resetGame() {
      this.rangeStart = 1;
      this.rangeEnd = 100;
      this.secretNumber = 0;
      this.userInput = null;
      this.feedback = '请输入你的猜测...';
      this.feedbackIcon = '';
      this.attempts = 0;
      this.gameOver = false;
      this.gameStarted = false;
      this.isDrawerOpen = false;
    }
  }
};
</script>

<style>
@keyframes bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.bounce {
  animation: bounce 0.3s ease-in-out;
}

.game-container {
  padding: 60rpx 40rpx;
  background: linear-gradient(to bottom right, #e0c3fc, #8ec5fc);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 52rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 60rpx;
  text-align: center;
}

.card {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
  padding: 40rpx;
  width: 90%;
  margin-bottom: 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.setting-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.range-display {
  font-size: 32rpx;
  color: #444;
  border: 2rpx solid #ccc;
  border-radius: 10rpx;
  padding: 20rpx 30rpx;
  background-color: rgba(255, 255, 255, 0.8);
  margin-bottom: 20rpx;
  display: inline-block;
}

.arrow {
  margin-left: 20rpx;
  font-size: 24rpx;
  color: #999;
}

.drawer-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slider-group {
  width: 90%;
  margin-bottom: 40rpx;
}

.start-btn {
  background-color: #07c160;
  color: white;
  font-size: 32rpx;
  width: 80%;
}

/* 水波纹按钮 */
.ripple {
  position: relative;
  overflow: hidden;
}
.ripple::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20rpx;
  height: 20rpx;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 50%;
  transform: scale(1, 1) translate(-50%, -50%);
  transform-origin: 50% 50%;
}
.ripple:active::after {
  animation: ripple 0.6s ease-out;
}
@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(10, 10);
    opacity: 0;
  }
}

.input-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.guess-input {
  width: 80%;
  height: 90rpx;
  border-radius: 12rpx;
  border: 2rpx solid #ccc;
  padding: 0 20rpx;
  font-size: 32rpx;
  margin-bottom: 40rpx;
  background-color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.guess-input:focus {
  border-color: #07c160;
  box-shadow: 0 0 10rpx rgba(7, 193, 96, 0.3);
}

.submit-btn {
  width: 80%;
  background-color: #07c160;
  color: white;
  font-size: 32rpx;
  margin-bottom: 50rpx;
}

.feedback-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
}

.icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.feedback-text {
  font-size: 32rpx;
  color: #333;
}

.attempts {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 40rpx;
  text-align: center;
}

.progress-bar {
  width: 80%;
  height: 16rpx;
  background-color: #ddd;
  border-radius: 8rpx;
  overflow: hidden;
  margin-bottom: 60rpx;
}

.progress-fill {
  height: 100%;
  background-color: #07c160;
  transition: width 0.3s ease-in-out;
}

.restart-btn {
  width: 80%;
  background-color: #f44336;
  color: white;
  font-size: 32rpx;
}
</style>